<template>
  <div class="login-container">
    <h2 class="login-title">疫情防疫打卡表</h2>
    <div v-if="form.flag == 1">
    <h2 class="login-title">今日已打卡</h2>
    </div>
    <a-form
        layout="horizontal"
        :model="temperature"
        @finish="callbackName"
        @finishFailed="handleFinishFailed"
        class = "login-form"
    >

      <a-form-item>
        <div v-if="form.flag != 1">
       <a-input  v-model:value="temperature.value"  placeholder="今日体温" class="inputBox" >
        </a-input>
        </div>
        <div v-if="form.flag == 1">

        </div>
      </a-form-item>
      <a-form-item>
        <a-button
            type="primary"
            html-type="submit"
            :disabled="form.flag == 1"
            class="submit"
        >
          提交
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, UnwrapRef} from 'vue';
import axios from 'axios';
import {message} from "ant-design-vue";
import router from "@/router";

export default defineComponent({
  setup() {
    interface FormState{
      loginid: string;
      password:string;
      username:string;
      phone:string;
      identitynumber:string;
      identity:string;
      flag:number
    }
    const form:UnwrapRef<FormState> = reactive({
      loginid:'',
      password:'',
      username:'',
      phone:'',
      identitynumber:'',
      identity:'',
      flag:0

    });
    const temperature = ref();
    temperature.value = {};
    const defultValue = sessionStorage.getItem("temperature");
    const loginid = sessionStorage.getItem("loginid");
    onMounted(()=>{

      getuser();
    })

    const getuser=()=>{
      //console.log(loginid);
      axios({
        url:'api/user/getUser',
        method:'get',
        params:{
          loginid:loginid
        }
      }).then(

          (response)=>{
            if(response.data.errorCode == 2001){
              //console.log(response);
              message.error("你没有登陆");
              router.push("/login")
            }
            else if(response.data.errorCode == 3001){
             // console.log(response);
              message.error("用户是管理员，不在此系统打卡");
              router.push("/message")
            }
            else {
              //console.log(response.data.flag)
              form.flag = response.data.flag;
              console.log("form.flag:", form.flag)
            }
          }
      )
    }

    const handleFinishFailed=()=>{
      console.log("提交失败")
    }

    const callbackName=()=>{
      console.log("提交填表")
      console.log("temperature",temperature.value.value);
      console.log("loginid",loginid);
      axios({
        url:'/api/clock/clockon',
        method:'post',
        params:{
          temperature:temperature.value.value,
          loginid:loginid
        }
      }).then(
          (response)=>{
            sessionStorage.setItem("temperature",temperature.value.value);
            //console.log("repsonse",response);
            getuser();
            router.push("/form");
          }
      )
    }


    return {
      temperature,
      handleFinishFailed,
      callbackName,
      form,
      defultValue
    };
  },
  components: {
    UserOutlined,
    LockOutlined,

  },
});
</script>
<style>


.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-form {
  width: 565px;
  height: 372px;
  margin: 0 auto;
  padding: 40px 110px;

}
.inputBox{
  height: 45px;
}


.submit{
  width: 100%;
  height: 45px;
  font-size: 16px;
}

.register{
  width: 100%;
  height: 45px;
  font-size:16px;
  margin-top: 10px;
}
.login-title {
  color: #42b983;
  text-align: center;
  margin: 120px 0;
  font-size: 48px;
  font-family: Microsoft Yahei;
}

</style>
